/**
*
* @title 基础模态框
* @description 模态框的基本使用
*
*/

import React, { Component } from 'react'
import { base } from 'nc-lightapp-front'
import moment from 'moment'
moment.locale('zh-cn')
const { NCButton, NCModal, NCDatePicker } = base
const Tooltip = base.NCTooltip

class PayModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showModal: false,
      payData: '',
      hintVisible: false
    }
    this.close = this.close.bind(this)
    this.open = this.open.bind(this)
    this.confirm = this.confirm.bind(this)
  }

  componentWillReceiveProps (nextProps) {
    console.log('子组件nextProps:' + nextProps)
    let { isPayModal, payData } = nextProps
    this.setState({
      showModal: isPayModal,
      payData: payData
    })
    console.log('子组件当前支付时间' + this.state)
  }

  close () {
    // this.setState({
    //   showModal: false
    // });
    this.props.onPayClose()
  }

  confirm () {
    let paydata = this.state.payData
    if (paydata == null || paydata == "") {
      return
    }
    this.props.onPayConfirm(paydata)
  }

  open () {
    this.setState({
      showModal: true
    })
  }
  render () {
    let { hintVisible } = this.state
    let tip = (
      <div>
        支付日期不能为空
      </div>
    )
    return (
      <div>
        <NCModal show={this.state.showModal} onHide={this.close} size='lg'>
          <NCModal.Header >
            <NCModal.Title>导出加密文件</NCModal.Title>
          </NCModal.Header>

          <NCModal.Body>
            支付日期
            <Tooltip
              visible={hintVisible}
              placement="top"
              overlay={tip}
            >
              <NCDatePicker
                placeholder="日期选择"
                value={this.state.payData}
                onChange={(v) => {
                  if (v != null && v != "") {
                    this.setState({ hintVisible: false })
                  } else {
                    this.setState({ hintVisible: true })
                  }
                  this.setState({
                    payData: v
                  })
                }}
              />
            </Tooltip>
          </NCModal.Body>

          <NCModal.Footer>
            <NCButton onClick={this.confirm} >
              确定
            </NCButton>
            <NCButton onClick={this.close}  >
              取消
            </NCButton>
          </NCModal.Footer>
        </NCModal>
      </div>
    )
  }
}

export default PayModal